import 'package:flutter/material.dart';
import 'package:flutter_douban/config/app_colors.dart';
import 'package:flutter_douban/model/cookstep_list_model.dart';
import 'package:flutter_douban/model/note_model.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter_douban/tool_views/photo_ViewScreen.dart';
import 'package:flutter_douban/tool_views/router.dart';

class DetailHeaderView extends StatefulWidget {
  final NoteModel model;
  const DetailHeaderView({Key? key, required this.model}) : super(key: key);

  @override
  _DetailHeaderViewState createState() => _DetailHeaderViewState();
}

class _DetailHeaderViewState extends State<DetailHeaderView> {
  @override
  Widget build(BuildContext context) {

    List<CookStepListModel> _dataList = [];
    widget.model.images!.forEach((element) {
      /// 大图浏览模式需要数据
      _dataList.add(CookStepListModel('', element.u, 0, 0, '', ''));
    });

    return Stack(
      children: [
        Container(
          margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
          height: int.parse(widget.model.images![0].h!) *
                      MediaQuery.of(context).size.width /
                      int.parse(widget.model.images![0].w!) >
                  MediaQuery.of(context).size.height - kToolbarHeight * 2
              ? 305
              : int.parse(widget.model.images![0].h!) *
                  MediaQuery.of(context).size.width /
                  int.parse(widget.model.images![0].w!),
          width: MediaQuery.of(context).size.width,
          child: Swiper(
            itemCount: widget.model.images!.length,
            autoplay: true,
            itemBuilder: (BuildContext context, int index) {
              return Image.network(
                widget.model.images![index].u!,
                fit: BoxFit.cover,
              );
            },

            /// 横线样式
            pagination: SwiperPagination(
              ///指示器显示的位置 Alignment.bottomCenter 底部中间
              alignment: Alignment.bottomRight,
              /// 距离调整
              margin: const EdgeInsets.only(bottom: 5),
              /// 指示器构建
              builder: FractionPaginationBuilder(
                  color: Colors.grey,
                  activeColor: Colors.white,
                  activeFontSize: 16,
                  fontSize: 16),
            ),
            onTap: (index) {
              Navigator.of(context).push(new FadeRouter(
                  child: PhotoViewGalleryScreen(
                    index: index,
                    dataArr: _dataList,
                  ),
                  duration_ms: 500));
            },
          ),
        ),
        Positioned(
            bottom: 10,
            left: 15,
            child: Container(
              alignment: Alignment.center,
              width: 30,
              height: 16,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(2),
                color: AppColors.yellow,
              ),
              child: Text(
                '精选',
                style: TextStyle(fontSize: 12, color: Colors.black),
              ),
            ))
      ],
    );
  }
}
